<template>
  <div class="home-view">
    <div class="temp-form">
      <el-form :model="formData" label-width="120px">
        <el-form-item label="贷款人">
          <el-input v-model="formData.userName" />
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="formData.address" />
        </el-form-item>
        <el-form-item label="邮编">
          <el-input v-model="formData.zipCode" />
        </el-form-item>
        <el-form-item label="法人代表">
          <el-input v-model="formData.legalRepresentative" />
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="formData.phoneNum" />
        </el-form-item>
        <el-form-item label="担保人">
          <el-input v-model="formData.guarantor" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="openHefayiju">合同查看</el-button>
          <el-button type="primary" @click="saveTemp">保存合同</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="docx-content">
      <vue-office-docx
        v-if="htmlContent"
        :src="htmlContent"
        style="height: 100vh;"
        @rendered="rendered"
      />
    </div>
    
    
  </div>
</template>
<script setup lang='ts' name="HomeView">
import { onMounted, ref, reactive} from "vue"
import mammoth from "mammoth";
import { exportDocx } from '@/utils/docs'
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'
import { saveAs } from 'file-saver'
import { ElMessage } from 'element-plus'
import 'element-plus/es/components/message/style/css'
const htmlContent = ref()
const openHefayiju = async () => {
  exportDocx('/test2.docx',formData, '许可证.docx').then((res) => {
    // loadDocx(res)
    htmlContent.value = res
  })
  
}

const formData = reactive({
  userName: '',
  address: '',
  zipCode: '',
  phoneNum: '',
  legalRepresentative: '', //法人代表
  guarantor: '', //打保人
  numberTimes: 12,
  year: new Date().getFullYear(),
  month: new Date().getMonth() + 1,
  day: new Date().getDate(),
  endYear: new Date().getFullYear() + 1,
  endMonth: new Date().getMonth() + 1,
  endDay: new Date().getDate(),
})

const rendered = () =>{
    console.log("渲染完成")
}
onMounted(() => {
  // loadDocx()
})
const saveTemp = () => {
  if(!htmlContent.value) {
    return ElMessage.error('请先查看合同')
  }
  saveAs(htmlContent.value, '合同模板')
}
</script>
<style lang='scss'>
  .home-view {
    width: 100%;
    min-height: 100vh;
    background-color: rgb(248, 255, 156);
  }
  .docx-content {
    width: 850px;
    /* height: 800px;
    overflow: auto; */
  }
  .temp-form {
    width: 70%;
    padding: 20px;
  }
</style>